import React, { Dispatch, Suspense, lazy } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux'
import { StoreType } from '../../../../store/types'
import { AuthActionTypes } from '../../../../store/auth/types'
import { RouteComponentProps, withRouter } from 'react-router-dom'
// import styles from './index.module.scss'
import WLoading from '../../../../components/loading'

const Home = lazy(() => import('../../home'))
const WebBanner = lazy(() => import('../../web/banner'))
const WebHomeLink = lazy(() => import('../../web/homeLink'))
const WebStudyTimeLine = lazy(() => import('../../web/studyTimeLine'))
const WebStudyAdd = lazy(() => import('../../web/study/add'))
const WebStudyList = lazy(() => import('../../web/study/list'))
const WebMe = lazy(() => import('../../web/me'))
const WebFeedback = lazy(() => import('../../web/feedback'))
const WebProductAdd = lazy(() => import('../../web/product/add'))
const WebProductList = lazy(() => import('../../web/product/list'))
const WebPackageAdd = lazy(() => import('../../web/package/add'))
const WebPackageList = lazy(() => import('../../web/package/list'))
const WebWork = lazy(() => import('../../web/work'))
const ServerEcs = lazy(() => import('../../server/ecs'))
const ServerOss = lazy(() => import('../../server/oss'))
const ResourcesPhoto = lazy(() => import('../../resources/photo'))
const ResourcesVideo = lazy(() => import('../../resources/video'))
const AuthUser = lazy(() => import('../../auth/user'))
const AuthRole = lazy(() => import('../../auth/role'))
const AuthUserList = lazy(() => import('../../auth/userList'))
const AuthPage = lazy(() => import('../../auth/page'))
const AuthApi = lazy(() => import('../../auth/api'))
const RecycleBanner = lazy(() => import('../../recycle/banner'))
const RecycleFeedback = lazy(() => import('../../recycle/feedback'))
const RecycleHomeLink = lazy(() => import('../../recycle/homeLink'))
const RecyclePackage = lazy(() => import('../../recycle/package'))
const RecycleProduct = lazy(() => import('../../recycle/product'))
const RecycleStudy = lazy(() => import('../../recycle/study'))
const RecycleStudyTimeLine = lazy(() => import('../../recycle/studyTimeLine'))
const RecycleWork = lazy(() => import('../../recycle/work'))
const LogsWebAjax = lazy(() => import('../../logs/web/ajax'))
const LogsWebError = lazy(() => import('../../logs/web/error'))
const LogsWebprocess = lazy(() => import('../../logs/web/process'))
const LogsServerError = lazy(() => import('../../logs/server/error'))
const LogsServerProcess = lazy(() => import('../../logs/server/process'))

interface StoreComInterface {
  menuData: [],
}

interface PropsInterface extends StoreComInterface, Partial<RouteComponentProps> {

}

const MenuCom = (props: PropsInterface) => {


  return (
    <Suspense fallback={<WLoading height='calc(100vh - 300px)' />}>
      <Switch>
        <Route exact path="/admin" component={Home} />
        <Route exact path="/admin/web/banner" component={WebBanner} />
        <Route exact path="/admin/web/home-link" component={WebHomeLink} />
        <Route exact path="/admin/web/study-time-line" component={WebStudyTimeLine} />
        <Route exact path="/admin/web/study/add" component={WebStudyAdd} />
        <Route exact path="/admin/web/study/list" component={WebStudyList} />
        <Route exact path="/admin/web/me" component={WebMe} />
        <Route exact path="/admin/web/feedback" component={WebFeedback} />
        <Route exact path="/admin/web/product/add" component={WebProductAdd} />
        <Route exact path="/admin/web/product/list" component={WebProductList} />
        <Route exact path="/admin/web/package/add" component={WebPackageAdd} />
        <Route exact path="/admin/web/package/list" component={WebPackageList} />
        <Route exact path="/admin/web/work" component={WebWork} />
        <Route exact path="/admin/server/ecs" component={ServerEcs} />
        <Route exact path="/admin/server/oss" component={ServerOss} />
        <Route exact path="/admin/resources/photo" component={ResourcesPhoto} />
        <Route exact path="/admin/resources/video" component={ResourcesVideo} />
        <Route exact path="/admin/auth/user" component={AuthUser} />
        <Route exact path="/admin/auth/role" component={AuthRole} />
        <Route exact path="/admin/auth/userList" component={AuthUserList} />
        <Route exact path="/admin/auth/page" component={AuthPage} />
        <Route exact path="/admin/auth/api" component={AuthApi} />
        <Route exact path="/admin/recycle/banner" component={RecycleBanner} />
        <Route exact path="/admin/recycle/feedback" component={RecycleFeedback} />
        <Route exact path="/admin/recycle/homeLink" component={RecycleHomeLink} />
        <Route exact path="/admin/recycle/package" component={RecyclePackage} />
        <Route exact path="/admin/recycle/product" component={RecycleProduct} />
        <Route exact path="/admin/recycle/study" component={RecycleStudy} />
        <Route exact path="/admin/recycle/studyTimeLine" component={RecycleStudyTimeLine} />
        <Route exact path="/admin/recycle/work" component={RecycleWork} />
        <Route exact path="/admin/logs/web/ajax" component={LogsWebAjax} />
        <Route exact path="/admin/logs/web/error" component={LogsWebError} />
        <Route exact path="/admin/logs/web/process" component={LogsWebprocess} />
        <Route exact path="/admin/logs/server/error" component={LogsServerError} />
        <Route exact path="/admin/logs/server/process" component={LogsServerProcess} />
        <Redirect to="/admin"></Redirect>
      </Switch>
    </Suspense>
  )
}

const mapStateToProps = (state: StoreType) => {
  return {
    menuData: state.auth.pages
  }
}

const mapDispatchToProps = (dispatch: Dispatch<AuthActionTypes>) => {
  return {}
}

const classModel = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    forwardRef: true
  }
)(withRouter(MenuCom as any))
export default classModel